<style type="text/css">
.selectBox-item{ overflow: hidden;
}
.selectBox-item-active{ background: #ffda43;
}
.selectBox{ border: 1px solid #CCCCCC; background: white;
}
.selectBox-active{ border: #fbcb09 1px solid; background: #fdf9e1;
}
</style>
<div class="selectBox selectBox-active" style="position: absolute; display: none; padding-bottom:4px; overflow: auto;"></div>

<script>
(function(){
	var $select = $(".selectBox");
	var $target;
	var position = function(){
		if($target != undefined){
			if($target.offset().left + $select.width() < $(window).width()){
				$select.css("-moz-border-radius", "0px 4px 4px 4px")
				.css("left", $target.offset().left)
				.css("top", $target.offset().top - 2)
				.css("padding-top", $target.height() + 2);
			} else {
				$select.css("-moz-border-radius", "4px 0px 4px 4px")
				.css("left", $target.offset().left + $target.width() - $select.width())
				.css("top", $target.offset().top - 2)
				.css("padding-top", $target.height() + 2);
			};
		};
	}
	
	$(document).click(function(){
		if($select.data("isOpening")){
			$select.data("isOpening", false);
			return;
		};
		if($select.data("isEnter")){
			return;
		};
		$select.data("close")();
	});
	
	$select.mouseenter(function(){
		$select.data("isEnter",true).addClass("selectBox-active");
	}).mouseleave(function(){
		$select.data("isEnter",false).removeClass("selectBox-active");
	});
	
	$select.data("open",function(){
		$select.data("isOpening", true).show();
		
		var $this = $target = $(this);
		if($select.data("this") != undefined){
			$select.data("this").css("z-index","0");
		};
		$this.css("z-index","1");
		$select.data("this", $this);
		if($this.css("position") != "absolute") $this.css("position", "relative");
		var $ul = $this.next();
		var $li = $ul.children("li");
		
		$select.html("");
		$li.each(function(){
			var $this = $(this);
			var $div = $("<div class='selectBox-item'></div>").append($this.clone(true).html());
			$div.mouseenter(function(){
				$(this).addClass("selectBox-item-active");
			}).mouseleave(function(){
				$(this).removeClass("selectBox-item-active");
			}).click(function(){
				$select.data("close")();
			});
			$select.append($div);
			$div.css("padding-left", $ul.css("padding-left"))
				.css("padding-right", $ul.css("padding-right"));
		});
		
		position();
	}).data("close",function(){
		$select.hide();
	})

	$(window).resize(function(){
		position();
	});
})();
</script>